<template>
    <div class="banner">
        <h2>幻灯片（{{fileList.length}}/6）</h2>
          <el-upload
            action="/api/client/base/uploadfile"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            ref="upload"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :auto-upload="true"
            :limit="6"
            :headers="myHeaders"
            :file-list="fileList"
            accept="image/jpeg, image/jpg, image/gif, image/png"
            :multiple="false">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        <div class="uploadBtn">
            <el-button @click="toUpLoad" type="primary">保存</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            fileList: [],
            dialogImageUrl: "",
            dialogVisible: false,
            myHeaders: {
              'access-token': this.$store.state.token, //这里重新定义了请求头
              'Authorization': this.$store.state.token,
              'user-id': this.$store.state.user_id
            },
        }
    },
    mounted() {
        this.getBanner()
    },
    methods:{
        // 获取banner列表
        getBanner(){
            this.$http.post('/api/root/ProductShop/getBanner',{}).then(res=>{
                console.log(res);
                if(res.code==1){
                    res.data.map(item=>{
                      this.fileList.push({
                        url:item.image_path,
                        id:item.image_id
                      })
                    })
                }
            })
        },

        handleRemove(file, fileList) {
          this.fileList = fileList
        },
        handlePictureCardPreview(file) {
          console.log('file', file);
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        handleAvatarSuccess(res, file, fileList) {
          console.log('fileList', fileList);
          this.fileList = fileList
        },
        beforeAvatarUpload(file) {
          const isLt2M = file.size / 1024 / 1024 < 10;
          if (!isLt2M) {
            this.$message.error('上传活动图片大小不能超过 10MB!');
          }
          return isLt2M;
        },

        // 保存按钮
        toUpLoad(){
            let bannerArr = []
            console.log(this.fileList,'///');
            this.fileList.map(item=>{
              if(item.response){
                bannerArr.push(item.response.data.id)
              }else{
                bannerArr.push(item.id)
              }
            })
            this.$http.post('/api/root/ProductShop/uploadBanner',{banner:bannerArr.join(',')}).then(res=>{
                if(res.code==1){
                    this.$message.success('提交成功')
                }else{
                    this.$message.error(res.msg)
                }
            })
        },

      
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
    }
    
}
</script>

<style lang="less" scoped>
.banner{
    padding: 100px;
    width: 100%;
    h2{margin-bottom: 50px}
    .uploadBtn{
        width: 100%;
        margin-top: 50px;
    }
}
</style>


